<!-- 批量下载文件 -->
<template>
  <button
    type="button"
    class="btn btn-secondary mr-2 button-css button-font"
    :disabled="!hasSelectedFiles"
    @click="handleBulkDownload"
  >
    <i class="bi bi-arrow-bar-down m-1"></i>批量下载
  </button>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";

export default {
  name: "BulkDownloadButton",
  computed: {
    ...mapGetters(["getSelectedFileIds"]), // 直接从store中获取selectedFileIds
    hasSelectedFiles() {
      return this.getSelectedFileIds.length > 0;
    },
  },
  methods: {
    // eslint-disable-next-line
    async handleBulkDownload() {
      // 检查是否有选中的文件
      if (this.getSelectedFileIds.length === 0) {
        alert("请选择要下载的文件！"); // 弹出提示框
        return; // 退出方法，不执行后续代码
      }

      // 如果有选中的文件，继续执行批量下载逻辑
      const fileIds = this.getSelectedFileIds;

      try {
        // 发送POST请求到后端，以blob类型接收响应数据
        const response = await axios.post(
          "/api/download/bulk-download",
          {
            fileIds,
          },
          {
            responseType: "blob", // 指定响应类型为blob
          }
        );

        // 创建一个隐藏的<a>标签来下载文件
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "bulk_download.zip"); // 或者从响应头中获取文件名
        document.body.appendChild(link);
        link.click(); // 模拟点击下载文件

        // 清理资源
        window.URL.revokeObjectURL(url);
        link.parentNode.removeChild(link);
        // 下载成功后，清空选中的文件ID
        this.$store.dispatch("clearSelectedFileIds");
        // 刷新页面
        setTimeout(function () {
          //1.5秒后执行刷新
          window.location.reload();
        }, 1500); //单位是毫秒
      } catch (error) {
        // 下载失败后，也清空选中的文件ID
        this.$store.dispatch("clearSelectedFileIds");
        console.error("批量下载失败:", error);
        // 在这里可以添加额外的错误处理逻辑
      }
    },
  },
};
</script>
